<template>
  <!-- //半圆 -->
  <div class="lineChart" style="color:#fff" v-if="this.per || this.per == 0">
    <!-- {{data}} -->
    <!-- {{this.per}}__ -->
    <echarts type='semiCircle' ref="echarts" v-model="data" :key="refresh" :dimensions='title' yName=''
      :series="series"></echarts>

    <!-- <myECharts v-model="dataS" :key='keyS' xName='供应商' yName='备件费/元' :dimensions='dimensionsS'></myECharts> -->
  </div>
</template>
<script>
import echarts from '_components/echarts/echarts.vue'
import * as echarts_org from 'echarts'

export default {
  name: 'index',
  components: {
    echarts
  },
  props: {
    colors: {
      type: Array,
      default() {
        return ['#257ABFFF', '#0EFBFFFF']
      }
    },
    data: Array,
    title: Array,
    //百分比
    per: Number,
    min: {
      type: Number,
      default() {
        return 0
      }
    },
    max: {
      type: Number,
      default() {
        return 15
      }
    }
  },
  watch: {
    per(a) {
      console.log(123456)
      this.series[1].endAngle = (220 - (200 * a) - 20),
        this.refresh++
    }
  },
  data() {
    return {
      refresh: 0,
      // dimensions:['name','num'],
      series: [
        {
          type: 'gauge',
          // z:100,
          // name:"全部案件数",
          // barWidth: 8,
          // barColor:"#3CDAB1FF",
          startAngle: 200,//起始角度，同极坐标
          endAngle: -20,
          radius: "95%",
          mxa: this.max,
          axisLine: {
            show: true,
            lineStyle: {
              color: [[1, '#0A131DFF']],//修改线的颜色
              width: 30
            }
          },
          splitLine: { show: false },
          splitLabel: { show: false },
          axisTick: { show: false, distance: 0 },
          axisLabel: { show: false },

          //指针
          pointer: { show: false },
          title: {
            show: false
          },
          detail: {
            // fontSize: 34,
            // offsetCenter: [0, '0%'],
            // valueAnimation: true,
            // formatter: function (value) {
            //     return value.toString()+'天'
            // },
            // color: '#00EDFFFF',
            // color:'red',
            // offsetCenter: ["0", "60%"]
            show: false

          },
          axisLabel: {
            color: '#FFF',
            fontSize: 20,
            distance: -20,
            rotate: 'tangential',
            formatter: (value) => {
              // console.log(value,11)
              if (value === 0) {
                return '';
              }
              else if (value === 100) {
                return `${this.max} `;
              }
              return '';
            },
            show: false
          },
        },
        {
          type: 'gauge',
          // name:"天",
          // barWidth: 8,
          // barColor:"#3CDAB1FF",
          startAngle: 200,//起始角度，同极坐标
          endAngle: (220 - (200 * (this.per == 0 ? 0.001 : this.per)) - 20),
          max: this.max,
          radius: "95%",
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [1, new echarts_org.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0.1,
                    color: this.colors[0]
                  },

                  {
                    offset: 1,
                    color: this.colors[1]
                  }
                ])
                ]

              ],

              width: 30
            }
          },
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          pointer: { show: false },
          detail: {
            fontSize: 34,
            valueAnimation: true,
            formatter: function (value) {
              return `${value}\n天`
            },
            color: '#00EDFFFF',
            // color:'red',
            offsetCenter: ["0", "60%"],
            formatter: '{num|{value}}\n {b|天}',
            rich: {
              b: {
                color: '#00EDFF',
                fontSize: 17,
                fontWeight: 500,
                padding: [0, 0, 0, 0],
              },
              num: {
                color: '#00EDFF',
                // backgroundColor: '#4C5058',
                padding: [0, 0, 15, 0],
                fontSize: 34,
                fontWeight: 400,
              }
            }

          },
          axisLabel: {
            color: '#FFF',
            fontSize: 20,
            distance: -10,
            rotate: 'tangential',
            formatter: function (value) {
              // console.log(value,11)
              if (value === 0) {
                return '0';
              }
              else {
                return '';
              }

            },
            show: false

          },
          // title:{
          //     show:false,
          //     offsetCenter: [0, '-50%']
          // }
          // progress:{show:false},

        },
      ]
    }
  },


  created() {
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style scoped>
.lineChart {

  width: 100%;
  height: 100%;
}

.head img {
  width: 100%;
  height: 100%;
}
</style>


<style>

</style>
